@primer/components 33.0.0-rc.b495ba4a → 33.1.0-rc.6856bcf5

package/lib-esm/stories/Radio.stories.js

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { BaseStyles, Box, Radio, Text, ThemeProvider } from '..';
+import { get } from '../constants';
+export default {
+  title: 'Forms/Radio',
+  component: Radio,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        pt: 3
+      }
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    checked: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const StyledLabel = styled.label.withConfig({
+  displayName: "Radiostories__StyledLabel",
+  componentId: "sc-8jrp2c-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:8px;display:flex;cursor:pointer;&:first-child{margin-left:0;}&[aria-disabled='true']{pointer-events:none;cursor:not-allowed;color:", ";}"], get('colors.primer.fg.disabled'));
+export const Default = ({
+  disabled,
+  checked
+}) => {
+  const [isSelected, setSelected] = useState(checked || false);
+
+  const handleChange = () => {
+    setSelected(!isSelected);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    p: 3,
+    sx: {
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Radio, {
+    id: "default-radio",
+    value: "default",
+    name: "default",
+    disabled: disabled,
+    checked: isSelected,
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "default-radio",
+    "aria-disabled": disabled
+  }, "Default radio button")));
+};
+export const MultipleRadios = ({
+  disabled
+}) => {
+  const [activeSelection, setActiveSelection] = useState();
+
+  const handleChange = event => {
+    const target = event.target.value;
+    setActiveSelection(target);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    p: 3,
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "yes-radio",
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Radio, {
+    id: "yes-radio",
+    onChange: handleChange,
+    checked: activeSelection === 'yes',
+    value: "yes",
+    name: "Choice",
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      marginLeft: 2
+    }
+  }, "Yes"))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    p: 3,
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "no-radio",
+    "aria-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Radio, {
+    id: "no-radio",
+    onChange: handleChange,
+    checked: activeSelection === 'no',
+    value: "no",
+    name: "Choice",
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      marginLeft: 2
+    }
+  }, "No"))));
+};

package/lib-esm/stories/ThemeProvider.stories.js

@@ -12,11 +12,7 @@ export default {
     }
   }
 };
-const GlobalStyle = createGlobalStyle`
-    body {
-        background-color: ${themeGet('colors.bg.canvas')};
-    }
-`;
+const GlobalStyle = createGlobalStyle(["body{background-color:", ";}"], themeGet('colors.bg.canvas'));
 
 function ActiveColorScheme() {
   const {

package/lib-esm/stories/useFocusTrap.stories.js

@@ -11,17 +11,7 @@ export default {
 }; // NOTE: the below styles are solely intended as a visual aid for
 // this Storybook story, but they're not recommended for a real site!
 
-const HelperGlobalStyling = createGlobalStyle`
-  *:focus {
-    outline: 2px solid ${themeGet('colors.auto.blue.3')} !important;
-  }
-  [data-focus-trap='active'] {
-    background-color: ${themeGet('colors.auto.green.2')}
-  }
-  [data-focus-trap='suspended'] {
-    background-color: ${themeGet('colors.auto.yellow.2')}
-  }
-`;
+const HelperGlobalStyling = createGlobalStyle(["*:focus{outline:2px solid ", " !important;}[data-focus-trap='active']{background-color:", "}[data-focus-trap='suspended']{background-color:", "}"], themeGet('colors.auto.blue.3'), themeGet('colors.auto.green.2'), themeGet('colors.auto.yellow.2'));
 const MarginButton = styled(Button).withConfig({
   displayName: "useFocusTrapstories__MarginButton",
   componentId: "sc-12zkn1e-0"

package/lib-esm/stories/useFocusZone.stories.js

@@ -16,14 +16,10 @@ export default {
 }; // NOTE: the below styles are solely intended as a visual aid for
 // this Storybook story, but they're not recommended for a real site!
 
-const HelperGlobalStyling = createGlobalStyle`
-  *:focus {
-    outline: 2px solid ${themeGet('colors.border.info')} !important;
-  }
-`;
+const HelperGlobalStyling = createGlobalStyle(["*:focus{outline:2px solid ", " !important;}"], themeGet('colors.border.info'));
 const MarginButton = styled(Button).withConfig({
   displayName: "useFocusZonestories__MarginButton",
-  componentId: "e94kdz-0"
+  componentId: "sc-e94kdz-0"
 })(["margin:", ";"], themeGet('space.1'));
 export const BasicFocusZone = () => {
   // Display each key press in the top-right corner of the page as a visual aid