turtlewolfe / disbook Goto Github PK

// import React from 'react';
// // import PropTypes from 'prop-types';
// const MyDice = ({ onClick }) => (
//   <button onClick={onClick}>dis My Dice</button>
// );

// export default MyDice; 

import React from 'react';

// const MyDice = ({ onClick }) => (

class MyDice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 7,
    };
  }

  generateRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  render() {
    return (
      <button
        className="myDice"
        onClick={
          () => this.setState(
            { value: this.generateRandom(1, 6) }
          )
        }>
        {this.state.value}
      </button>
    );
  }
}

export default MyDice;

import React from 'react';
import MyDice from '../MyDice/MyDice';
import imageUrl from '../../shared/images/logo.svg';
import { action } from '@storybook/addon-actions';

export default {
  title: 'MyDice',
  component: MyDice,
  parameters: {
    assets: [
      imageUrl, // link to a file imported
      'https://via.placeholder.com/300/09f/fff.png', // link to an external image
      'https://www.example.com', // link to a webpage
      'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
    ],
  },
};

export const Text = () => <MyDice onClick={action('dis clicked My Text Dice')}>Hello MyDice</MyDice>;

export const Emoji = () => (
  <MyDice onClick={action('dis clicked.. but no emojis, so sad face')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </MyDice>
);