@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/ReadMore/ReadMore.js

@@ -5,80 +5,97 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
-const Container = styled.div `
-    display: flex;
-    flex-direction: column;
-`;
-const Content = styled.div `
-    ${({ $isExpanded, $collapsedSize }) => !$isExpanded &&
-    `
+const Container = styled.div.withConfig({
+  displayName: "ReadMore__Container",
+  componentId: "sc-11ipeem-0"
+})(["display:flex;flex-direction:column;"]);
+const Content = styled.div.withConfig({
+  displayName: "ReadMore__Content",
+  componentId: "sc-11ipeem-1"
+})(["", ""], ({
+  $isExpanded,
+  $collapsedSize
+}) => !$isExpanded && `
         overflow: hidden;
         max-height: ${$collapsedSize};
         mask-image: linear-gradient(${theme.color.background.white.default}, transparent);
-    `}
-`;
-const ButtonWrapper = styled.div `
-    margin: 0.625rem 0.313rem;
-    align-self: ${({ $buttonPosition }) => $buttonPosition === 'right' ? 'flex-end' : 'flex-start'};
-`;
-const StyledButtonIcon = styled(ButtonIcon) `
-    color: ${theme.color.text.pink};
-
-    &:hover {
-        color: ${theme.color.hover.pink};
-        text-decoration: none;
+    `);
+const ButtonWrapper = styled.div.withConfig({
+  displayName: "ReadMore__ButtonWrapper",
+  componentId: "sc-11ipeem-2"
+})(["margin:0.625rem 0.313rem;align-self:", ";"], ({
+  $buttonPosition
+}) => $buttonPosition === 'right' ? 'flex-end' : 'flex-start');
+const StyledButtonIcon = styled(ButtonIcon).withConfig({
+  displayName: "ReadMore__StyledButtonIcon",
+  componentId: "sc-11ipeem-3"
+})(["color:", ";&:hover{color:", ";text-decoration:none;}&:active{color:", ";}"], theme.color.text.pink, theme.color.hover.pink, theme.color.text.pink);
+/** @visibleName Read More */
+const ReadMore = _a => {
+  var {
+      collapsedSize = '10rem',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["collapsedSize", 'data-testid']);
+  const [expanded, setExpanded] = useState(false);
+  const contentRef = useRef(null);
+  const buttonRef = useRef(null);
+  const userInteractedRef = useRef(false);
+  // TODO: Remove once https://jira.dna.fi/browse/STYLE-662 is done
+  const temporaryIsStatelessFlag = typeof props.isExpanded !== 'undefined';
+  const temporaryStateManagement = temporaryIsStatelessFlag ? props.isExpanded : expanded;
+  const handleOnClick = event => {
+    if (props.onClick) {
+      props.onClick(event);
     }
-
-    &:active {
-        color: ${theme.color.text.pink};
+    if (!temporaryIsStatelessFlag) {
+      setExpanded(!expanded);
     }
-`;
-/** @visibleName Read More */
-const ReadMore = (_a) => {
-    var { collapsedSize = '10rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["collapsedSize", 'data-testid']);
-    const [expanded, setExpanded] = useState(false);
-    const contentRef = useRef(null);
-    const buttonRef = useRef(null);
-    const userInteractedRef = useRef(false);
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-662 is done
-    const temporaryIsStatelessFlag = typeof props.isExpanded !== 'undefined';
-    const temporaryStateManagement = temporaryIsStatelessFlag ? props.isExpanded : expanded;
-    const handleOnClick = (event) => {
-        if (props.onClick) {
-            props.onClick(event);
-        }
-        if (!temporaryIsStatelessFlag) {
-            setExpanded(!expanded);
-        }
-        userInteractedRef.current = true;
-    };
-    useEffect(() => {
-        var _a, _b;
-        if (userInteractedRef.current) {
-            if (temporaryStateManagement) {
-                (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-        }
-    }, [temporaryStateManagement]);
-    // Function to apply tabIndex to all links elements of children (since we don't control what is passed as children)
-    const forceTabIndexOnTextLinks = (child) => {
-        if (!isValidElement(child)) {
-            return child;
-        }
-        if (child.type === 'a') {
-            return cloneElement(child, {
-                tabIndex: temporaryStateManagement ? 0 : -1,
-            });
-        }
-        return child;
-    };
-    return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "region" },
-        React__default.createElement(Content, { ref: contentRef, "$isExpanded": temporaryStateManagement, "$collapsedSize": collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, Children.map(props.children, forceTabIndexOnTextLinks)),
-        React__default.createElement(ButtonWrapper, { "$buttonPosition": props.buttonPosition },
-            React__default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick, "aria-expanded": temporaryStateManagement }, props.buttonLabel))));
+    userInteractedRef.current = true;
+  };
+  useEffect(() => {
+    var _a, _b;
+    if (userInteractedRef.current) {
+      if (temporaryStateManagement) {
+        (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      } else {
+        (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+    }
+  }, [temporaryStateManagement]);
+  // Function to apply tabIndex to all links elements of children (since we don't control what is passed as children)
+  const forceTabIndexOnTextLinks = child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+    if (child.type === 'a') {
+      return /*#__PURE__*/cloneElement(child, {
+        tabIndex: temporaryStateManagement ? 0 : -1
+      });
+    }
+    return child;
+  };
+  return /*#__PURE__*/React__default.createElement(Container, {
+    id: props.id,
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-label": props.ariaLabel,
+    role: "region"
+  }, /*#__PURE__*/React__default.createElement(Content, {
+    ref: contentRef,
+    "$isExpanded": temporaryStateManagement,
+    "$collapsedSize": collapsedSize,
+    "data-testid": dataTestId && `${dataTestId}-content`,
+    "aria-hidden": temporaryStateManagement ? 'false' : 'true',
+    tabIndex: temporaryStateManagement ? 0 : -1
+  }, Children.map(props.children, forceTabIndexOnTextLinks)), /*#__PURE__*/React__default.createElement(ButtonWrapper, {
+    "$buttonPosition": props.buttonPosition
+  }, /*#__PURE__*/React__default.createElement(StyledButtonIcon, {
+    ref: buttonRef,
+    icon: temporaryStateManagement ? ChevronUp : ChevronDown,
+    onClick: handleOnClick,
+    "aria-expanded": temporaryStateManagement
+  }, props.buttonLabel)));
 };
 
 export { ReadMore as default };

package/build/es/components/Search/Search.js

@@ -6,72 +6,60 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
-const Container = styled.div `
-    display: flex;
-    align-items: center;
-    border-bottom: 2px solid ${theme.color.default.pink};
-`;
-const Input = styled.input `
-    display: inline-block;
-    appearance: none;
-    border: 0;
-    vertical-align: middle;
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    color: ${theme.color.text.black};
-    background-color: transparent;
-    padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
-    width: 100%;
-    height: ${getMultipliedSize(theme.base.baseHeight, 4)};
-
-    &:focus {
-        outline: 0;
-    }
-
-    &:invalid {
-        box-shadow: none;
-    }
-
-    &::placeholder {
-        color: ${theme.color.text.black}${theme.color.transparency.T40};
-    }
-
-    &::-ms-clear {
-        display: none;
-    }
-
-    &::-webkit-search-decoration,
-    &::-webkit-search-cancel-button,
-    &::-webkit-search-results-button,
-    &::-webkit-search-results-decoration {
-        display: none;
+const Container = styled.div.withConfig({
+  displayName: "Search__Container",
+  componentId: "sc-1q7hkgt-0"
+})(["display:flex;align-items:center;border-bottom:2px solid ", ";"], theme.color.default.pink);
+const Input = styled.input.withConfig({
+  displayName: "Search__Input",
+  componentId: "sc-1q7hkgt-1"
+})(["display:inline-block;appearance:none;border:0;vertical-align:middle;font-family:", ";font-size:", ";line-height:", ";color:", ";background-color:transparent;padding:0 ", ";width:100%;height:", ";&:focus{outline:0;}&:invalid{box-shadow:none;}&::placeholder{color:", "", ";}&::-ms-clear{display:none;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{display:none;}"], theme.fontFamily.default, theme.fontSize.default, theme.lineHeight.default, theme.color.text.black, getMultipliedSize(theme.base.baseWidth, 1), getMultipliedSize(theme.base.baseHeight, 4), theme.color.text.black, theme.color.transparency.T40);
+const Button = styled(ButtonIcon).withConfig({
+  displayName: "Search__Button",
+  componentId: "sc-1q7hkgt-2"
+})(["margin:0 ", ";"], getMultipliedSize(theme.base.baseWidth, 1));
+const Search = _a => {
+  var _b, _c;
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  const inputRef = useRef(null);
+  const handleButtonClick = e => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
     }
-`;
-const Button = styled(ButtonIcon) `
-    margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
-const Search = (_a) => {
-    var _b, _c;
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const inputRef = useRef(null);
-    const handleButtonClick = (e) => {
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
-        if (props.onButtonClick) {
-            props.onButtonClick(e);
-        }
-    };
-    let buttonAriaLabel = '';
-    if (props.clearButtonAriaLabel && props.searchButtonAriaLabel) {
-        buttonAriaLabel = ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length)
-            ? props.clearButtonAriaLabel
-            : props.searchButtonAriaLabel;
+    if (props.onButtonClick) {
+      props.onButtonClick(e);
     }
-    return (React__default.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus, "aria-label": props.ariaLabel }),
-        React__default.createElement(Button, { icon: ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) ? Close : Search$1, name: `${props.name}-button`, onClick: handleButtonClick, ariaLabel: buttonAriaLabel || undefined })));
+  };
+  let buttonAriaLabel = '';
+  if (props.clearButtonAriaLabel && props.searchButtonAriaLabel) {
+    buttonAriaLabel = ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? props.clearButtonAriaLabel : props.searchButtonAriaLabel;
+  }
+  return /*#__PURE__*/React__default.createElement(Container, {
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    id: props.id,
+    name: props.name,
+    type: "search",
+    ref: inputRef,
+    value: props.value,
+    onChange: props.onChange,
+    onBlur: props.onBlur,
+    onFocus: props.onFocus,
+    onKeyDown: props.onKeyDown,
+    onKeyPress: props.onKeyPress,
+    placeholder: props.placeholder,
+    autoFocus: props.autoFocus,
+    "aria-label": props.ariaLabel
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    icon: ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) ? Close : Search$1,
+    name: `${props.name}-button`,
+    onClick: handleButtonClick,
+    ariaLabel: buttonAriaLabel || undefined
+  }));
 };
 
 export { Search as default };