Nutella Pancake Machine

    @component-controls/figma-embed
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.3 • Public • Published

    Table of contents

    In action

    Example site

    Overview

    This addon contains a FigmaEmbedBlock that you can integrate into any page, as well as a standalone FigmaPage

    Getting Started

    Install

    yarn add @component-controls/figma-plugin --dev

    Add to a document

    The figma file will be assigned to all the stories in the current document

    in mystory.stories.tsx

    import { Document } from '@component-controls/core';
    
    export default {
      title: 'MyStory',
      plugins: {
        figma: [
          'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
        ],
      },
    } as Document;
    
    

    Add to a story

    The figma file will be assigned only to a specific story. This allows multiple stories in the document to have different figma files associated with them.

    in mystory.stories.tsx

    import React from 'react';
    import { Document, Example, ControlTypes } from '@component-controls/core';
    import { Button, ButtonProps } from './Button';
    
    export default {
      title: 'MyStory',
    } as Document;
    
    export const story: Example<ButtonProps> = () => <Button>click me</Button>;
    
    story.design = plugins: {
      figma: [
        'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
      ],
    };
    

    Insert into an MDX document

    in mystory.mdx

    ---
    title: MyStory
    ---
    import { FigmaEmbedBlock } from '@component-controls/figma-plugin';
    
    <FigmaEmbedBlock
      items={[
        {
          url:
            'https://www.figma.com/file/hS1sLjYq49vjnKXhwGgHwg/Navigation-UI-design-components-Community?node-id=1%3A2309',
        },
        {
          url:
            'https://www.figma.com/file/LtgbR2mbVPbQTNDfDQxbKL/Atanas-Stoyanov-s-Team-Colors?node-id=0%3A1',
        },
      ]}
    />
    

    Configure props globally

    You can globally change the iframe options for the FigmaEmbedBlock component

    in .config/runtime.tsx

    import { RuntimeConfiguration } from "@component-controls/core";
    
    const config: RuntimeConfiguration = {
      ...
      components: {
        figma: {
          width: '200'
        }
      },
    };
    
    export default config;
    

    API

    FigmaEmbedBlock

    react component

    defined in @component-controls/figma-embed/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.tsx

    properties

    Name Type Parent Description
    items ((string, type))[] FigmaEmbedBlockOwnProps
    title string BlockContainerOwnProps optional section title for the block.
    description string BlockContainerOwnProps optional markdown description.
    id string BlockContainerOwnProps optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
    collapsible boolean BlockContainerOwnProps if false, will nothave a collapsible frame.
    data-testid string BlockContainerOwnProps testing id
    plain boolean BlockContainerOwnProps inner container variant or plain
    slot string | undefined HTMLAttributes
    style CSSProperties | undefined HTMLAttributes
    key Key | null | undefined Attributes
    sx ThemeUICSSObject | ThemeDerivedStyles Attributes The ThemeUIStyleObject extends [style props](https://emotion.sh/docs/object-styles) such that properties that are part of the Theme will be transformed to their corresponding values. Other valid CSS properties are also allowed.
    defaultChecked boolean | undefined HTMLAttributes
    defaultValue string | number | ReadonlyArray<string> | undefined HTMLAttributes
    suppressContentEditableWarning boolean | undefined HTMLAttributes
    suppressHydrationWarning boolean | undefined HTMLAttributes
    accessKey string | undefined HTMLAttributes
    className string | undefined HTMLAttributes
    contentEditable Booleanish | "inherit" | undefined HTMLAttributes
    contextMenu string | undefined HTMLAttributes
    dir string | undefined HTMLAttributes
    draggable Booleanish | undefined HTMLAttributes
    hidden boolean | undefined HTMLAttributes
    lang string | undefined HTMLAttributes
    placeholder string | undefined HTMLAttributes
    spellCheck Booleanish | undefined HTMLAttributes
    tabIndex number | undefined HTMLAttributes
    translate "yes" | "no" | undefined HTMLAttributes
    radioGroup string | undefined HTMLAttributes
    role AriaRole | undefined HTMLAttributes
    about string | undefined HTMLAttributes
    datatype string | undefined HTMLAttributes
    inlist any HTMLAttributes
    prefix string | undefined HTMLAttributes
    property string | undefined HTMLAttributes
    resource string | undefined HTMLAttributes
    typeof string | undefined HTMLAttributes
    vocab string | undefined HTMLAttributes
    autoCapitalize string | undefined HTMLAttributes
    autoCorrect string | undefined HTMLAttributes
    autoSave string | undefined HTMLAttributes
    color string | undefined HTMLAttributes
    itemProp string | undefined HTMLAttributes
    itemScope boolean | undefined HTMLAttributes
    itemType string | undefined HTMLAttributes
    itemID string | undefined HTMLAttributes
    itemRef string | undefined HTMLAttributes
    results number | undefined HTMLAttributes
    security string | undefined HTMLAttributes
    unselectable "on" | "off" | undefined HTMLAttributes
    inputMode "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined HTMLAttributes Hints at the type of data that might be entered by the user while editing the element or its contents
    is string | undefined HTMLAttributes Specify that a standard HTML element should behave like a defined custom built-in element
    aria-activedescendant string | undefined AriaAttributes Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
    aria-atomic boolean | "false" | "true" | undefined AriaAttributes Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
    aria-autocomplete "none" | "inline" | "list" | "both" | undefined AriaAttributes Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
    aria-busy boolean | "false" | "true" | undefined AriaAttributes Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
    aria-checked boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
    aria-colcount number | undefined AriaAttributes Defines the total number of columns in a table, grid, or treegrid.
    aria-colindex number | undefined AriaAttributes Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
    aria-colspan number | undefined AriaAttributes Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
    aria-controls string | undefined AriaAttributes Identifies the element (or elements) whose contents or presence are controlled by the current element.
    aria-current boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined AriaAttributes Indicates the element that represents the current item within a container or set of related elements.
    aria-describedby string | undefined AriaAttributes Identifies the element (or elements) that describes the object.
    aria-details string | undefined AriaAttributes Identifies the element that provides a detailed, extended description for the object.
    aria-disabled boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
    aria-dropeffect "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined AriaAttributes Indicates what functions can be performed when a dragged object is released on the drop target.
    aria-errormessage string | undefined AriaAttributes Identifies the element that provides an error message for the object.
    aria-expanded boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
    aria-flowto string | undefined AriaAttributes Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
    aria-grabbed boolean | "false" | "true" | undefined AriaAttributes Indicates an element's "grabbed" state in a drag-and-drop operation.
    aria-haspopup boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined AriaAttributes Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
    aria-hidden boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element is exposed to an accessibility API.
    aria-invalid boolean | "false" | "true" | "grammar" | "spelling" | undefined AriaAttributes Indicates the entered value does not conform to the format expected by the application.
    aria-keyshortcuts string | undefined AriaAttributes Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
    aria-label string | undefined AriaAttributes Defines a string value that labels the current element.
    aria-labelledby string | undefined AriaAttributes Identifies the element (or elements) that labels the current element.
    aria-level number | undefined AriaAttributes Defines the hierarchical level of an element within a structure.
    aria-live "off" | "assertive" | "polite" | undefined AriaAttributes Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
    aria-modal boolean | "false" | "true" | undefined AriaAttributes Indicates whether an element is modal when displayed.
    aria-multiline boolean | "false" | "true" | undefined AriaAttributes Indicates whether a text box accepts multiple lines of input or only a single line.
    aria-multiselectable boolean | "false" | "true" | undefined AriaAttributes Indicates that the user may select more than one item from the current selectable descendants.
    aria-orientation "horizontal" | "vertical" | undefined AriaAttributes Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
    aria-owns string | undefined AriaAttributes Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
    aria-placeholder string | undefined AriaAttributes Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
    aria-posinset number | undefined AriaAttributes Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
    aria-pressed boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "pressed" state of toggle buttons.
    aria-readonly boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is not editable, but is otherwise operable.
    aria-relevant "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined AriaAttributes Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
    aria-required boolean | "false" | "true" | undefined AriaAttributes Indicates that user input is required on the element before a form may be submitted.
    aria-roledescription string | undefined AriaAttributes Defines a human-readable, author-localized description for the role of an element.
    aria-rowcount number | undefined AriaAttributes Defines the total number of rows in a table, grid, or treegrid.
    aria-rowindex number | undefined AriaAttributes Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
    aria-rowspan number | undefined AriaAttributes Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
    aria-selected boolean | "false" | "true" | undefined AriaAttributes Indicates the current "selected" state of various widgets.
    aria-setsize number | undefined AriaAttributes Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
    aria-sort "none" | "ascending" | "descending" | "other" | undefined AriaAttributes Indicates if items in a table or grid are sorted in ascending or descending order.
    aria-valuemax number | undefined AriaAttributes Defines the maximum allowed value for a range widget.
    aria-valuemin number | undefined AriaAttributes Defines the minimum allowed value for a range widget.
    aria-valuenow number | undefined AriaAttributes Defines the current value for a range widget.
    aria-valuetext string | undefined AriaAttributes Defines the human readable text alternative of aria-valuenow for a range widget.
    dangerouslySetInnerHTML type | undefined DOMAttributes
    onCopy ClipboardEventHandler | undefined DOMAttributes
    onCopyCapture ClipboardEventHandler | undefined DOMAttributes
    onCut ClipboardEventHandler | undefined DOMAttributes
    onCutCapture ClipboardEventHandler | undefined DOMAttributes
    onPaste ClipboardEventHandler | undefined DOMAttributes
    onPasteCapture ClipboardEventHandler | undefined DOMAttributes
    onCompositionEnd CompositionEventHandler | undefined DOMAttributes
    onCompositionEndCapture CompositionEventHandler | undefined DOMAttributes
    onCompositionStart CompositionEventHandler | undefined DOMAttributes
    onCompositionStartCapture CompositionEventHandler | undefined DOMAttributes
    onCompositionUpdate CompositionEventHandler | undefined DOMAttributes
    onCompositionUpdateCapture CompositionEventHandler | undefined DOMAttributes
    onFocus FocusEventHandler | undefined DOMAttributes
    onFocusCapture FocusEventHandler | undefined DOMAttributes
    onBlur FocusEventHandler | undefined DOMAttributes
    onBlurCapture FocusEventHandler | undefined DOMAttributes
    onChange FormEventHandler | undefined DOMAttributes
    onChangeCapture FormEventHandler | undefined DOMAttributes
    onBeforeInput FormEventHandler | undefined DOMAttributes
    onBeforeInputCapture FormEventHandler | undefined DOMAttributes
    onInput FormEventHandler | undefined DOMAttributes
    onInputCapture FormEventHandler | undefined DOMAttributes
    onReset FormEventHandler | undefined DOMAttributes
    onResetCapture FormEventHandler | undefined DOMAttributes
    onSubmit FormEventHandler | undefined DOMAttributes
    onSubmitCapture FormEventHandler | undefined DOMAttributes
    onInvalid FormEventHandler | undefined DOMAttributes
    onInvalidCapture FormEventHandler | undefined DOMAttributes
    onLoad ReactEventHandler | undefined DOMAttributes
    onLoadCapture ReactEventHandler | undefined DOMAttributes
    onError ReactEventHandler | undefined DOMAttributes
    onErrorCapture ReactEventHandler | undefined DOMAttributes
    onKeyDown KeyboardEventHandler | undefined DOMAttributes
    onKeyDownCapture KeyboardEventHandler | undefined DOMAttributes
    onKeyPress KeyboardEventHandler | undefined DOMAttributes
    onKeyPressCapture KeyboardEventHandler | undefined DOMAttributes
    onKeyUp KeyboardEventHandler | undefined DOMAttributes
    onKeyUpCapture KeyboardEventHandler | undefined DOMAttributes
    onAbort ReactEventHandler | undefined DOMAttributes
    onAbortCapture ReactEventHandler | undefined DOMAttributes
    onCanPlay ReactEventHandler | undefined DOMAttributes
    onCanPlayCapture ReactEventHandler | undefined DOMAttributes
    onCanPlayThrough ReactEventHandler | undefined DOMAttributes
    onCanPlayThroughCapture ReactEventHandler | undefined DOMAttributes
    onDurationChange ReactEventHandler | undefined DOMAttributes
    onDurationChangeCapture ReactEventHandler | undefined DOMAttributes
    onEmptied ReactEventHandler | undefined DOMAttributes
    onEmptiedCapture ReactEventHandler | undefined DOMAttributes
    onEncrypted ReactEventHandler | undefined DOMAttributes
    onEncryptedCapture ReactEventHandler | undefined DOMAttributes
    onEnded ReactEventHandler | undefined DOMAttributes
    onEndedCapture ReactEventHandler | undefined DOMAttributes
    onLoadedData ReactEventHandler | undefined DOMAttributes
    onLoadedDataCapture ReactEventHandler | undefined DOMAttributes
    onLoadedMetadata ReactEventHandler | undefined DOMAttributes
    onLoadedMetadataCapture ReactEventHandler | undefined DOMAttributes
    onLoadStart ReactEventHandler | undefined DOMAttributes
    onLoadStartCapture ReactEventHandler | undefined DOMAttributes
    onPause ReactEventHandler | undefined DOMAttributes
    onPauseCapture ReactEventHandler | undefined DOMAttributes
    onPlay ReactEventHandler | undefined DOMAttributes
    onPlayCapture ReactEventHandler | undefined DOMAttributes
    onPlaying ReactEventHandler | undefined DOMAttributes
    onPlayingCapture ReactEventHandler | undefined DOMAttributes
    onProgress ReactEventHandler | undefined DOMAttributes
    onProgressCapture ReactEventHandler | undefined DOMAttributes
    onRateChange ReactEventHandler | undefined DOMAttributes
    onRateChangeCapture ReactEventHandler | undefined DOMAttributes
    onSeeked ReactEventHandler | undefined DOMAttributes
    onSeekedCapture ReactEventHandler | undefined DOMAttributes
    onSeeking ReactEventHandler | undefined DOMAttributes
    onSeekingCapture ReactEventHandler | undefined DOMAttributes
    onStalled ReactEventHandler | undefined DOMAttributes
    onStalledCapture ReactEventHandler | undefined DOMAttributes
    onSuspend ReactEventHandler | undefined DOMAttributes
    onSuspendCapture ReactEventHandler | undefined DOMAttributes
    onTimeUpdate ReactEventHandler | undefined DOMAttributes
    onTimeUpdateCapture ReactEventHandler | undefined DOMAttributes
    onVolumeChange ReactEventHandler | undefined DOMAttributes
    onVolumeChangeCapture ReactEventHandler | undefined DOMAttributes
    onWaiting ReactEventHandler | undefined DOMAttributes
    onWaitingCapture ReactEventHandler | undefined DOMAttributes
    onAuxClick MouseEventHandler | undefined DOMAttributes
    onAuxClickCapture MouseEventHandler | undefined DOMAttributes
    onClick MouseEventHandler | undefined DOMAttributes
    onClickCapture MouseEventHandler | undefined DOMAttributes
    onContextMenu MouseEventHandler | undefined DOMAttributes
    onContextMenuCapture MouseEventHandler | undefined DOMAttributes
    onDoubleClick MouseEventHandler | undefined DOMAttributes
    onDoubleClickCapture MouseEventHandler | undefined DOMAttributes
    onDrag DragEventHandler | undefined DOMAttributes
    onDragCapture DragEventHandler | undefined DOMAttributes
    onDragEnd DragEventHandler | undefined DOMAttributes
    onDragEndCapture DragEventHandler | undefined DOMAttributes
    onDragEnter DragEventHandler | undefined DOMAttributes
    onDragEnterCapture DragEventHandler | undefined DOMAttributes
    onDragExit DragEventHandler | undefined DOMAttributes
    onDragExitCapture DragEventHandler | undefined DOMAttributes
    onDragLeave DragEventHandler | undefined DOMAttributes
    onDragLeaveCapture DragEventHandler | undefined DOMAttributes
    onDragOver DragEventHandler | undefined DOMAttributes
    onDragOverCapture DragEventHandler | undefined DOMAttributes
    onDragStart DragEventHandler | undefined DOMAttributes
    onDragStartCapture DragEventHandler | undefined DOMAttributes
    onDrop DragEventHandler | undefined DOMAttributes
    onDropCapture DragEventHandler | undefined DOMAttributes
    onMouseDown MouseEventHandler | undefined DOMAttributes
    onMouseDownCapture MouseEventHandler | undefined DOMAttributes
    onMouseEnter MouseEventHandler | undefined DOMAttributes
    onMouseLeave MouseEventHandler | undefined DOMAttributes
    onMouseMove MouseEventHandler | undefined DOMAttributes
    onMouseMoveCapture MouseEventHandler | undefined DOMAttributes
    onMouseOut MouseEventHandler | undefined DOMAttributes
    onMouseOutCapture MouseEventHandler | undefined DOMAttributes
    onMouseOver MouseEventHandler | undefined DOMAttributes
    onMouseOverCapture MouseEventHandler | undefined DOMAttributes
    onMouseUp MouseEventHandler | undefined DOMAttributes
    onMouseUpCapture MouseEventHandler | undefined DOMAttributes
    onSelect ReactEventHandler | undefined DOMAttributes
    onSelectCapture ReactEventHandler | undefined DOMAttributes
    onTouchCancel TouchEventHandler | undefined DOMAttributes
    onTouchCancelCapture TouchEventHandler | undefined DOMAttributes
    onTouchEnd TouchEventHandler | undefined DOMAttributes
    onTouchEndCapture TouchEventHandler | undefined DOMAttributes
    onTouchMove TouchEventHandler | undefined DOMAttributes
    onTouchMoveCapture TouchEventHandler | undefined DOMAttributes
    onTouchStart TouchEventHandler | undefined DOMAttributes
    onTouchStartCapture TouchEventHandler | undefined DOMAttributes
    onPointerDown PointerEventHandler | undefined DOMAttributes
    onPointerDownCapture PointerEventHandler | undefined DOMAttributes
    onPointerMove PointerEventHandler | undefined DOMAttributes
    onPointerMoveCapture PointerEventHandler | undefined DOMAttributes
    onPointerUp PointerEventHandler | undefined DOMAttributes
    onPointerUpCapture PointerEventHandler | undefined DOMAttributes
    onPointerCancel PointerEventHandler | undefined DOMAttributes
    onPointerCancelCapture PointerEventHandler | undefined DOMAttributes
    onPointerEnter PointerEventHandler | undefined DOMAttributes
    onPointerEnterCapture PointerEventHandler | undefined DOMAttributes
    onPointerLeave PointerEventHandler | undefined DOMAttributes
    onPointerLeaveCapture PointerEventHandler | undefined DOMAttributes
    onPointerOver PointerEventHandler | undefined DOMAttributes
    onPointerOverCapture PointerEventHandler | undefined DOMAttributes
    onPointerOut PointerEventHandler | undefined DOMAttributes
    onPointerOutCapture PointerEventHandler | undefined DOMAttributes
    onGotPointerCapture PointerEventHandler | undefined DOMAttributes
    onGotPointerCaptureCapture PointerEventHandler | undefined DOMAttributes
    onLostPointerCapture PointerEventHandler | undefined DOMAttributes
    onLostPointerCaptureCapture PointerEventHandler | undefined DOMAttributes
    onScroll UIEventHandler | undefined DOMAttributes
    onScrollCapture UIEventHandler | undefined DOMAttributes
    onWheel WheelEventHandler | undefined DOMAttributes
    onWheelCapture WheelEventHandler | undefined DOMAttributes
    onAnimationStart AnimationEventHandler | undefined DOMAttributes
    onAnimationStartCapture AnimationEventHandler | undefined DOMAttributes
    onAnimationEnd AnimationEventHandler | undefined DOMAttributes
    onAnimationEndCapture AnimationEventHandler | undefined DOMAttributes
    onAnimationIteration AnimationEventHandler | undefined DOMAttributes
    onAnimationIterationCapture AnimationEventHandler | undefined DOMAttributes
    onTransitionEnd TransitionEventHandler | undefined DOMAttributes
    onTransitionEndCapture TransitionEventHandler | undefined DOMAttributes
    ref Exclude<R, string> | undefined PropsWithRef
    as
    React.ElementType
    encodeHTML*: encodeHTML
    at*: function (
    index*: number
    ) => T | undefined
    BoxOwnProps
    variant string BoxOwnProps
    css InterpolationPrimitive | ArrayInterpolation<> | FunctionInterpolation<> BoxOwnProps
    m ResponsiveValue | undefined SpaceProps Margin on top, left, bottom and right
    margin ResponsiveValue | undefined SpaceProps Margin on top, left, bottom and right
    mt ResponsiveValue | undefined SpaceProps Margin on top
    marginTop ResponsiveValue | undefined SpaceProps Margin on top
    mr ResponsiveValue | undefined SpaceProps Margin on right
    marginRight ResponsiveValue | undefined SpaceProps Margin on right
    mb ResponsiveValue | undefined SpaceProps Margin on bottom
    marginBottom ResponsiveValue | undefined SpaceProps Margin on bottom
    ml ResponsiveValue | undefined SpaceProps Margin on left
    marginLeft ResponsiveValue | undefined SpaceProps Margin on left
    mx ResponsiveValue | undefined SpaceProps Margin on left and right
    marginX ResponsiveValue | undefined SpaceProps Margin on left and right
    my ResponsiveValue | undefined SpaceProps Margin on top and bottom
    marginY ResponsiveValue | undefined SpaceProps Margin on top and bottom
    p ResponsiveValue | undefined SpaceProps Padding on top, left, bottom and right
    padding ResponsiveValue | undefined SpaceProps Padding on top, left, bottom and right
    pt ResponsiveValue | undefined SpaceProps Padding on top
    paddingTop ResponsiveValue | undefined SpaceProps Padding on top
    pr ResponsiveValue | undefined SpaceProps Padding on right
    paddingRight ResponsiveValue | undefined SpaceProps Padding on right
    pb ResponsiveValue | undefined SpaceProps Padding on bottom
    paddingBottom ResponsiveValue | undefined SpaceProps Padding on bottom
    pl ResponsiveValue | undefined SpaceProps Padding on left
    paddingLeft ResponsiveValue | undefined SpaceProps Padding on left
    px ResponsiveValue | undefined SpaceProps Padding on left and right
    paddingX ResponsiveValue | undefined SpaceProps Padding on left and right
    py ResponsiveValue | undefined SpaceProps Padding on top and bottom
    paddingY ResponsiveValue | undefined SpaceProps Padding on top and bottom
    bg ResponsiveValue | undefined BackgroundColorProps The color utility parses a component's color and bg props and converts them into CSS declarations. By default the raw value of the prop is returned. Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. Array values are converted into responsive values. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
    backgroundColor ResponsiveValue | undefined BackgroundColorProps
    opacity ResponsiveValue | undefined OpacityProps The opacity CSS property sets the transparency of an element or the degree to which content behind an element is visible. [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
    name string StoryInputProps
    allow string | undefined IframeHTMLAttributes
    allowFullScreen boolean | undefined IframeHTMLAttributes
    allowTransparency boolean | undefined IframeHTMLAttributes
    frameBorder number | string | undefined IframeHTMLAttributes
    height number | string | undefined IframeHTMLAttributes
    loading "eager" | "lazy" | undefined IframeHTMLAttributes
    marginHeight number | undefined IframeHTMLAttributes
    marginWidth number | undefined IframeHTMLAttributes
    referrerPolicy HTMLAttributeReferrerPolicy | undefined IframeHTMLAttributes
    sandbox string | undefined IframeHTMLAttributes
    scrolling string | undefined IframeHTMLAttributes
    seamless boolean | undefined IframeHTMLAttributes
    src string | undefined IframeHTMLAttributes
    srcDoc string | undefined IframeHTMLAttributes
    width number | string | undefined IframeHTMLAttributes

    Install

    npm i @component-controls/figma-embed

    DownloadsWeekly Downloads

    33

    Version

    4.0.3

    License

    MIT

    Unpacked Size

    244 kB

    Total Files

    18

    Last publish

    Collaborators

    • atanasster