diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..6b7206e Binary files /dev/null and b/.DS_Store differ diff --git a/CountryFlag/CountryFlag.jsx b/CountryFlag/CountryFlag.jsx new file mode 100644 index 0000000..3786ea1 --- /dev/null +++ b/CountryFlag/CountryFlag.jsx @@ -0,0 +1,169 @@ +import React, { Component } from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import globe from '../../../public/flag-globe-blue.png'; +import Caret from '../Caret'; + +import './CountryFlag.scss'; + +class CountryFlag extends Component { + // add the props varibales to defaultProps required if any + static defaultProps = {} + + // initialize the constructor + constructor(props) { + super(props); + // set the default state values as below + this.state = { + image: 'https://restcountries.eu/data/ind.svg', + text: 'India', + isClicked: false, + isSelected: false + } + } + + handleDivClick = (e) => { + // on click of this handler + // if this.state.isSelected is true + if(this.state.isSelected) { + // then, set this.state.isClicked to false + this.setState({ isClicked: false }); + } else { + // else, set this.state.isClicked to true + this.setState({ isClicked: true }); + } + } + + handleListClick = (e) => { + // on click of this handler + // if event target's innerText is equal to below string + if(e.target.innerText === 'See all countries and regions') { + // call the function callAll() through props + this.props.callAll(); + // set the state values as below + this.setState({ + isClicked: false, + image: e.target.children[0].src, + text: e.target.innerText, + isSelected: true + }) + } else { + // else, set the state values as below, except the isSelected + this.setState({ + isClicked: false, + image: e.target.children[0].src, + text: e.target.innerText + }) + } + } + + handleListAllClick = (e) => { + // on click of this handler + // set the state values as below, except the isSelected + this.setState({ + image: e.target.children[0].src, + text: e.target.innerText, + isSelected: false + }); + } + + render() { + // declare the baseClassName variable and assign a value to it + const baseClassName = "pb-country-flag"; + + // obtain the following props from this.props object + let { + parentClassName, + disabled, + data + } = this.props; + + // pass the following classnames based on the conditions if it is true + let classes = { + [baseClassName]: true, + [parentClassName]: parentClassName, + [`${baseClassName}__content--disabled`]: disabled + }; + + // declare an array of objects with default values as below + const defaultOptions = [ + { name: 'India', flag: 'https://restcountries.eu/data/ind.svg' }, + { name: 'Global', flag: globe }, + { name: 'See all countries and regions', flag: '' } + ]; + + return ( +
+ + {/* call the handleDivClick event handler onClick function */} +
+ {/* set the value of the source to this.state.image */} + + {/* set the value of the innerText to this.state.text */} + {this.state.text} + +
+ { + // if this.state.isClicked is true + this.state.isClicked ? + // render the below div with the list of countries +
+ { + // if this.state.isClicked is true + this.state.isClicked ? + // iterate over the defaultOptions array + defaultOptions.map((item, index) => { + return ( + // call this.handleListClick event handler onClick function on the elements +
  • + + {item.name} +
    • + ) + }) + : null + } +
    + : null + } + { + // if this.state.isSelected is true + this.state.isSelected ? +
    + { + // if this.state.isSelected is true + this.state.isSelected ? + // iterate over the data and build the below list of elements + data.map((item, index) => { + return ( + // call the handleListAllClick event handler onClick function on the elements +
  • + + {item.name} +
    • + ) + }) + // else, return null + : null + } +
    + // else, return null + : null + } +
    + ) + } +} + +// set the static variable propTypes and pass the values to the components based on the types +CountryFlag.propTypes = { + // allow the boolean type values to disabled prop + disabled: PropTypes.bool, + // allow any of the below values in the array object below to align prop + align: PropTypes.oneOf([ + 'right', + 'left' + ]) +} + +export default CountryFlag; diff --git a/CountryFlag/CountryFlag.scss b/CountryFlag/CountryFlag.scss new file mode 100644 index 0000000..0a83507 --- /dev/null +++ b/CountryFlag/CountryFlag.scss @@ -0,0 +1,58 @@ +@import "../../scss/common"; + +$block: "pb-country-flag"; + +.#{$block}__content{ + background-color: $c-white; + border: $border-width $border-style $c-border; + border-radius: $border-radius-l; + padding: $space-s; + position: absolute; + width: $size-avatar-xxl; + + .#{$block}__content-image{ + float: left; + height: $height-logo-s; + margin-right: $space-m; + width: $height-logo-s; + } + + .pb-caret{ + float: right; + padding-right: $space-l; + } +} + +.#{$block}__label { + font-family: $font-family; + font-weight: $font-weight-bold; +} + +.#{$block}__countries{ + background-color: $c-white; + border: $border-width $border-style $c-border; + border-radius: $border-radius-l; + margin: 0; + position: relative; + top: $space-m; + width: $size-avatar-xxl; + + .#{$block}__countries-list{ + cursor: pointer; + list-style-type: none; + margin: 0; + padding: $space-s; + + &:hover{ + background-color: $c-link-lighter; + } + } + + .#{$block}__countries-image{ + float: left; + height: $height-logo-s; + margin-right: $space-m; + width: $height-logo-s; + } + +} diff --git a/CountryFlag/CountryFlag.stories.js b/CountryFlag/CountryFlag.stories.js new file mode 100644 index 0000000..b0a02ce --- /dev/null +++ b/CountryFlag/CountryFlag.stories.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { setAddon, storiesOf } from '@storybook/react'; +import JSXAddon from 'storybook-addon-jsx'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; +import globe from '../../../public/flag-globe-blue.png'; + +import CountryFlag from '.'; + +setAddon(JSXAddon); + +// create a state wrapper to the country flag component +export default class CountryFlagStateWrapper extends React.Component { + // initialize the constructor + constructor(props) { + super(props); + // set the state values as below + this.state = { + data: [] + } + } + + // when callAll() is called through the props + // make a 'ajax' fetch request to an external restcountrires.eu api + callAll = () => { + // set the default values in allOptions array + let allOptions = [{ name: 'Global', flag: globe }]; + // make a fetch call + fetch(`https://restcountries.eu/rest/v2/all`) + // convert the response to json + .then((response) => response.json()) + // take the data and set the data and concat it to allOptions and assign it to this.state.data + .then((data) => { this.setState({ data: allOptions.concat(data) }) }) + .catch((e) => { console.log(e) }); + } + + render() { + return ( + // render the country flag component + + ) + } +} + +// initalize a module with its name, let's say we are gonna create stories +const stories = storiesOf('CountryFlag', module); + +// add knobs to the stories through addDecorator() +stories.addDecorator(withKnobs); + +// create a 'Default' story using addWithJSX() +stories.addWithJSX('Default', () => { + const disabled = boolean('Disabled?'); + + return ( + // return the complete countryFlagStateWrapper component + + ) +}); diff --git a/CountryFlag/index.jsx b/CountryFlag/index.jsx new file mode 100644 index 0000000..ea53381 --- /dev/null +++ b/CountryFlag/index.jsx @@ -0,0 +1,2 @@ +import CountryFlag from './CountryFlag'; +export default CountryFlag; diff --git a/CountryFlagGlobal/CountryFlagGlobal.jsx b/CountryFlagGlobal/CountryFlagGlobal.jsx new file mode 100644 index 0000000..f97cf0a --- /dev/null +++ b/CountryFlagGlobal/CountryFlagGlobal.jsx @@ -0,0 +1,126 @@ +import React, { Component } from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import flagGlobeBlue from '../../../public/flag-globe-blue.png'; + +import SvgIcon from '../SvgIcon'; +import './CountryFlagGlobal.scss'; + +export default class CountryFlagGlobal extends Component { + // add the props varibales to defaultProps required if any + static defaultProps = {} + + // initialize the constructor + constructor(props) { + super(props); + // set the default state values as below + this.state = { + text: 'Global Site', + image: flagGlobeBlue + } + } + + handleClick = (e) => { + // on click of this handler + // assign the event target innerText to variable 'text' + let text = e.target.innerText; + // iterate over the countires array from the props return the image and text values + this.props.countries.map((obj, i) => { + return obj.nativeName === text ? this.setState({ + image: obj.flag, + text: obj.nativeName + }) : null + }) + } + + handleAllOfAsia = () => { + // call the callAllOfAsia() through props + this.props.callAllOfAsia(); + } + + render() { + // define the baseClassName variable and assign it to a classname + let baseClassName = "pb-country-flag-global"; + + // obtain the following props from this.props object + let { + parentClassName, + disabled, + countries + } = this.props; + + // pass the following classnames based on the conditions if it is true + let classes = { + [baseClassName]: true, + [parentClassName]: parentClassName, + [`${baseClassName}__bottom-division`]: disabled + } + + return ( +
    +
    +
    +
    +
    +
    + {/* take the background image from story-weaver stored apis and also put it in css style's attribute backgroundImage where it takes url */} +
    +
    + +

    Choose your country or region

    +

    By setting your region, StoryWeaver will be able to suggest more relevant content to you

    +
    +
    +
    + WORLDWIDE +
    +
    + {/* set the value of image source from this.state.image */} + + {/* set the value of innerText from this.state.text */} + {this.state.text} +
    +
    +
    + ASIA +
    + {/* map/iterate over the array where you find objects */} + {countries.map((obj, i) => { + return ( + // add an onClick event and assign a event handler to every element/object +
    + {/* let the source be the value from object flag field */} + + {/* let the innerText be the value from object nativeName field */} + {obj.nativeName} +
    + ) + })} + {/* map/iterate over the array showAllOfAsia from props */} + {this.props.showAllOfAsia ? null + // if showAllOfAsia is not true, display the below html content + // add onClick event which calls handleAllOfAsia event handler + :
    + + All of asia +
    + } +
    +
    +
    +
    +
    +
    +
    +
    + ) + } +} + +// set the static variable propTypes and pass the values to the components based on the types +CountryFlagGlobal.propTypes = { + // allow the boolean type values to disabled prop + disabled: PropTypes.bool, + // allow the object type values of an array to countries prop + countries: PropTypes.arrayOf(PropTypes.object) +} diff --git a/CountryFlagGlobal/CountryFlagGlobal.scss b/CountryFlagGlobal/CountryFlagGlobal.scss new file mode 100644 index 0000000..b10034d --- /dev/null +++ b/CountryFlagGlobal/CountryFlagGlobal.scss @@ -0,0 +1,198 @@ +@import "../../scss/common"; + +$block: "pb-country-flag-global"; + +.#{$block}__top-division { + margin-bottom: $size-xxxs; +} + +.#{$block}--overlay--dark { + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); + background-color: $c-overlay; + bottom: 0; + left: 0; + margin-top: 0; + position: fixed; + right: 0; + top: 0; + z-index: 100; +} + +.#{$block}__container { + -ms-flex-align: center; + -ms-flex-pack: center; + -webkit-box-align: center; + -webkit-box-pack: center; + align-items: center; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + justify-content: center; + left: 0; + margin-top: 0; + overflow: hidden; + position: fixed; + right: 0; + top: 0; + z-index: 110; +} + +.#{$block}__bounds { + -webkit-box-shadow: $box-shadow-l3; + border-radius: $border-radius-s; + box-shadow: $box-shadow-l3; + position: relative; +} + +.#{$block}__wrapper { + max-width: $size-xxxl; +} + +.#{$block}__content { + border-radius: $border-radius-s; + display: block; + position: relative; +} + +.#{$block}__background-img { + background-position: center; + background-size: cover; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-width: $size-xxxl; + min-height: $size-xxl; +} + +.#{$block}__first { + background-color: $c-overlay-2; + float: left; + height: $size-xxl; + padding: $size-xs; + width: $width-half; + + .pb-svg-icon--type-globe-1 { + height: $size-icon-xl; + object-fit: contain; + width: $size-icon-xl; + } + + .#{$block}__side-content-heading { + color: $c-white; + font-family: $font-family-alt; + font-size:$size-avatar-m; + } + + .#{$block}__side-content-text { + color: $c-white; + font-family: $font-family; + font-size:$size-xxxs; + } +} + +.#{$block}__last { + background: $c-white; + float: left; + height: $size-xxl; + margin-top: 0; + overflow: scroll; + padding: $size-xs; + width: $width-half; +} + +.#{$block}--disabled { + pointer-events: none; + + .#{$block}__bottom-division { + opacity: $opacity-disabled-dark; + } +} + +.flag-select .selected--flag--option { + padding: $space-m $size-icon-xl; +} + +.#{$block}__top-division-content { + height: $size-icon-l; + padding: $size-xxxs; + + .#{$block}__top-division-content-text { + cursor: pointer; + font-family: $font-family-rare-language-fallbacks; + font-size: $size-xxxs; + font-weight: normal; + line-height: normal; + margin-left: $space-s; + } + + .#{$block}__top-division-content-image{ + float: left; + height: $height-logo-s; + width: $height-logo-s; + } +} + +.#{$block}__top-division-header { + color: $c-text-light; + font-family: $font-family; + font-size: $size-icon-s; + font-style: normal; + font-weight: $font-weight-bold; + letter-spacing: $letter-spacing-caps; +} + +.#{$block}__bottom-division-header { + color: $c-text-light; + font-family: $font-family; + font-size: $size-icon-s; + font-stretch: normal; + font-style: normal; + font-weight: $font-weight-bold; + letter-spacing: $letter-spacing-caps; + line-height: normal; +} + +.#{$block}__bottom-division-content { + border: $border-width $border-style $c-white; + cursor: pointer; + float: left; + height: $size-icon-l; + padding: $size-icon-s; + width: $width-half; + + &:hover{ + border: $border-width $border-style $c-info-light; + } + + .#{$block}__bottom-division-content-text { + font-family: $font-family-rare-language-fallbacks; + font-size: $size-xxxs; + margin-left: $space-m; + } + + .#{$block}__bottom-division-content-image { + float: left; + height: $height-logo-s; + width: $height-logo-s; + } +} + +.#{$block}__all-content { + float: left; + padding: $size-icon-s; + width: $width-half; + + .#{$block}__all-content-text { + cursor: pointer; + font-family: $font-family-rare-language-fallbacks; + font-size: $size-xxxs; + margin-left: $space-s; + } + + .#{$block}__all-content-image{ + float: left; + } +} + diff --git a/CountryFlagGlobal/CountryFlagGlobal.stories.js b/CountryFlagGlobal/CountryFlagGlobal.stories.js new file mode 100644 index 0000000..6ca66e4 --- /dev/null +++ b/CountryFlagGlobal/CountryFlagGlobal.stories.js @@ -0,0 +1,98 @@ +import React, { Component } from 'react'; +import { setAddon, storiesOf } from '@storybook/react'; +import JSXAddon from 'storybook-addon-jsx'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; + +import CountryFlagGlobal from '.'; + +setAddon(JSXAddon); + +// create a state wrapper to the country flag global component +export class CountryFlagGlobalStateWrapper extends Component { + // initialize the constructor + constructor(props) { + super(props); + + // set the default state values as below + this.state = { + data: [], + showAllOfAsia: false + } + } + + // if the component is loaded, make an 'ajax' fetch call + componentDidMount = () => { + // make a get request to the restcountries.eu api + fetch(`https://restcountries.eu/rest/v2/all`) + .then((response) => response.json()) + .then((data) => { + // obtain the data through promise + // declare an empty array locally + let asiaData = []; + // iterate over the array + data.map((obj, i) => { + // if the region is equal to Asia then push the object to the array else return null + return obj.region === 'Asia' ? asiaData.push(obj) : null + }) + // slice the number of objects 0th index to 8th index and assign it to variable 'asia' + let asia = asiaData.slice(0,8); + // then, set the state data with the value of asia + this.setState({ data: asia }) + }) + .catch((e) => { console.log(e) }) + } + + // fetch call + callAllOfAsia = () => { + // make a get request to the restcountries.eu api + fetch(`https://restcountries.eu/rest/v2/all`) + .then((response) => response.json()) + .then((data) => { + // set the state of data to empty when the response data is obtained + this.setState({ data: [] }) + // declare an empty array locally + let asiaData = []; + // map over the objects if the region is equal to Asia then push the object to asiaData array else return null + data.map((obj, i) => { + return obj.region === 'Asia' ? asiaData.push(obj) : null + }) + // set the state of data value to be the asiaData and showAllOfAsia to true + this.setState({ data: asiaData, showAllOfAsia: true }) + }) + .catch((e) => { console.log(e) }) + } + + render() { + return ( + // return the countryFlagGlobal component + + ) + } +} + +// initalize a module with its name, let's say we are gonna create stories +const stories = storiesOf('CountryFlagGlobal', module); + +// add knobs to the stories through addDecorator() +stories.addDecorator(withKnobs); + +// create a 'Default' story using addWithJSX() +stories.addWithJSX('Default', () => { + const disabled = boolean('Disabled?'); + + return ( + // return the complete CountryFlagGlobalStateWrapper component + + ) +}); diff --git a/CountryFlagGlobal/index.jsx b/CountryFlagGlobal/index.jsx new file mode 100644 index 0000000..b23f938 --- /dev/null +++ b/CountryFlagGlobal/index.jsx @@ -0,0 +1,2 @@ +import CountryFlagGlobal from './CountryFlagGlobal'; +export default CountryFlagGlobal; diff --git a/CountryLanguageSelect/CountryLanguageSelect.jsx b/CountryLanguageSelect/CountryLanguageSelect.jsx new file mode 100644 index 0000000..e5a3b5a --- /dev/null +++ b/CountryLanguageSelect/CountryLanguageSelect.jsx @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import SelectField from '../SelectField'; + +export default class CountryLanguageSelect extends Component { + static defaultProps = {}; + + render() { + // define the baseClassName variable and assign it to a classname + let baseClassName = "pb-country-language-select"; + + // obtain the following props from this.props object + let { + parentClassName, + options, + onChange, + showAll + } = this.props; + + // pass the following classnames based on the conditions if it is true + let classes = { + [baseClassName]: true, + [parentClassName]: parentClassName + } + + return ( +
    +
    + {/* if this.state.showAll is true */} + { + showAll + ? + // return the SelectField with options and onChange event props + + : + // return the SelectField with options and onChange event props + + } +
    + ) + } +} + +// set the static variable propTypes and pass the values to the components based on the types +CountryLanguageSelect.propTypes = { + // allow the string type values to name prop + name: PropTypes.string, + // allow the any type of values to value prop + value: PropTypes.any, + // allow the array type value which consists of two fields name and queryValue to options prop + options: PropTypes.arrayOf(PropTypes.shape({ + name: PropTypes.string.isRequired, + queryValue: PropTypes.string.isRequired + })), + // allow functions to onChange prop + onChange: PropTypes.func, + // allow the boolean type value to showAll prop + showAll: PropTypes.bool +} diff --git a/CountryLanguageSelect/CountryLanguageSelect.stories.js b/CountryLanguageSelect/CountryLanguageSelect.stories.js new file mode 100644 index 0000000..bd7d0b5 --- /dev/null +++ b/CountryLanguageSelect/CountryLanguageSelect.stories.js @@ -0,0 +1,129 @@ +import React, {Component} from 'react'; +import { setAddon, storiesOf } from '@storybook/react'; +import JSXAddon from 'storybook-addon-jsx'; +import { withKnobs, text, boolean } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; + +import CountryLanguageSelect from '.'; + +setAddon(JSXAddon); + +// create a state wrapper to the country flag component +export class CountryLanguageSelectStateWrapper extends Component { + // initialize the constructor + constructor(props) { + super(props); + + // set the default state values as below + this.state = { + allOptions: [], + showAll: false, + value: null + } + } + + // call the callCountries through the props + callCountries = () => { + // make a get request to the restcountries.eu api + fetch(`https://restcountries.eu/rest/v2/all`) + .then((response) => response.json()) + .then((data) => { + // obtain the data through promise + // declare an empty array locally + let allOptions = []; + // iterate over the array + data.map((obj) => obj.languages.map((lang, i) => { + // itertate over the languages + // push the nativeName and name to the allOptions array on every iteration + return allOptions.push({ + 'name': `${lang.nativeName}`, + 'queryValue': `${lang.name}` + }) + })) + // concat the state of allOptions with with newly obtained values in local allOptions + // and set the showAll to true + this.setState({ + allOptions: this.state.allOptions.concat(allOptions), + showAll: true + }) + }) + .catch((e) => console.log(e)); + } + + onChangeHandler = (value) => { + // on click of the handler + // check the this.state.value if it is not equal to the value from the parameter + if (this.state.value !== value) { + // and if value is strictly equal to 'all' + if (value === 'all') { + // call the function callCountrires() + this.callCountries(); + } else { + // else, set the value of state with the value from the parameter + this.setState({ value }) + } + } + } + + render() { + // default options array + const options = [ + { name: "English", queryValue: "english" }, + { name: "Hindi", queryValue: "hindi" }, + { name: "Marati", queryValue: "marati" }, + { name: "See all languages", queryValue: "all" } + ] + + // defaults options array + const defaults = [ + { name: "English", queryValue: "english" }, + { name: "Hindi", queryValue: "hindi" }, + { name: "Marati", queryValue: "marati" } + ] + + return + } +} + +// initalize a module with its component name, let's say we are gonna create stories for the component +const stories = storiesOf('CountryLanguageSelect', module); + +// add knobs to the stories through addDecorator() +stories.addDecorator(withKnobs); + +// create a 'Default' story using addWithJSX() +stories.addWithJSX('Default', () => { + const id = text('ID', 'storybook-select-field'); + const label = text('Label', 'Language'); + const name = text('Name'); + const disabled = boolean('Disabled?'); + const loading = boolean('Loading?'); + + return +}); diff --git a/CountryLanguageSelect/index.jsx b/CountryLanguageSelect/index.jsx new file mode 100644 index 0000000..4d55ff7 --- /dev/null +++ b/CountryLanguageSelect/index.jsx @@ -0,0 +1,2 @@ +import CountryLanguageSelect from './CountryLanguageSelect'; +export default CountryLanguageSelect; diff --git a/CountryTextOverlay/CountryTextOverlay.jsx b/CountryTextOverlay/CountryTextOverlay.jsx new file mode 100644 index 0000000..fd58200 --- /dev/null +++ b/CountryTextOverlay/CountryTextOverlay.jsx @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; + +import Halver from '../Halver'; +import SvgIcon from '../SvgIcon'; +import './CountryTextOverlay.scss'; + +export default class CountryTextOverlay extends Component { + static defaultProps = {} + + render() { + // define the baseClassName variable and assign it to a classname + let baseClassName = "pb-country-text-overlay"; + + // obtain the following props from this.props object + let { + parentClassName, + disabled, + backgroundUrl, + content + } = this.props; + + // pass the following classnames based on the conditions if it is true + let classes = { + [baseClassName]: true, + [parentClassName]: parentClassName, + [`${baseClassName}--disabled`]: disabled + } + + return ( +
    + {/* use the existing Halver component to display the 'backgroundUrl' */} + + {/* use the existing SvgIcon component to display the svg 'globe-1' */} + + {/* diplay the html content by setting the innerHTML for the div as below */} +
    +     +
    + ) + } +} + +// set the static variable propTypes and pass the values to the components based on the types +CountryTextOverlay.propTypes = { + // allow the boolean type value to the disabled prop + disabled: PropTypes.bool, + // allow the string type value to the backgroundUrl prop + backgroundUrl: PropTypes.string, + // allow the string type value to the content prop + content: PropTypes.string +} diff --git a/CountryTextOverlay/CountryTextOverlay.scss b/CountryTextOverlay/CountryTextOverlay.scss new file mode 100644 index 0000000..c5f6613 --- /dev/null +++ b/CountryTextOverlay/CountryTextOverlay.scss @@ -0,0 +1,56 @@ +@import "../../scss/common"; + +$block: "pb-country-text-overlay"; + +.#{$block}{ + -ms-flex-align: center; + -ms-flex-pack: center; + -webkit-box-pack: center; + -webkit-box-shadow: $box-shadow-l3; + align-items: center; + backdrop-filter: blur(2px); + background-color: $c-overlay; + bottom: 0; + border-radius: $border-radius; + box-shadow: $box-shadow-l3; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + justify-content: center; + left: 0; + margin-top: 0; + overflow: hidden; + position: fixed; + right: 0; + top: 0; + z-index: 100; + + .pb-halver{ + min-height: $size-xxl; + width: $size-xxxl; + } + + .pb-halver__content{ + background-color: $c-overlay-2; + padding: $size-xs; + } + + .pb-svg-icon--type-globe-1 { + height: $size-icon-xl; + object-fit: contain; + width: $size-icon-xl; + } + + .#{$block}__title { + color: $c-white; + font-family: $font-family-alt; + font-size:$size-avatar-m; + } + + .#{$block}__text { + color: $c-white; + font-family: $font-family; + font-size:$size-xxxs; + } + +} diff --git a/CountryTextOverlay/CountryTextOverlay.stories.js b/CountryTextOverlay/CountryTextOverlay.stories.js new file mode 100644 index 0000000..1cfa5f8 --- /dev/null +++ b/CountryTextOverlay/CountryTextOverlay.stories.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { setAddon, storiesOf } from '@storybook/react'; +import JSXAddon from 'storybook-addon-jsx'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; + +import CountryTextOverlay from '.'; + +setAddon(JSXAddon); + +// create a state wrapper to the countryTextOverlay component +export class CountryTextOverlayStateWrapper extends React.Component { + // initialize the constructor + constructor(props) { + super(props); + // set the default state values as below + this.state = { + image: 'https://storage.googleapis.com/story-weaver-e2e-production/illustration_crops/23275/size7/7180ab1f3fede909148ef8c30f7d7b82.jpg', + content: ` +

    Choose your country or region

    +

    By setting your region, StoryWeaver will be able to suggest more relevant content to you

    + ` + } + } + + render() { + return ( + // return the CountryTextOverlay component + + ) + } +} + +// initalize a module with its component name, let's say we are gonna create stories for the component +const stories = storiesOf('CountryTextOverlay', module); + +// add knobs to the stories through addDecorator() method +stories.addDecorator(withKnobs); + +// create a 'Default' story using addWithJSX() method +stories.addWithJSX('Default', () => { + const disabled = boolean('Disabled?'); + + return ( + + ) +}); diff --git a/CountryTextOverlay/index.jsx b/CountryTextOverlay/index.jsx new file mode 100644 index 0000000..c0c1120 --- /dev/null +++ b/CountryTextOverlay/index.jsx @@ -0,0 +1,2 @@ +import CountryTextOverlay from './CountryTextOverlay'; +export default CountryTextOverlay;